<template>
	<view class="history">
		<!-- 内容 -->
		<view v-if="shopList.length">
			<view class="history-head">
				<view class="head-title">
					<view class="title" v-for="item in shopList" :key="item[0].uid">
						<van-checkbox :value="item[0].ace" v-if="!show" @change="lw(item[0].uid, $event)"></van-checkbox>
						<view class="title-image">
							<image :src="item[0].img" mode=""></image>
						</view>
						<view class="title-box">
							<view class="box-top">{{item[0].name}}</view>
							<view class="box-bottom">
								<view class="top">{{item[0].title}}</view>
								<view>{{item[0].VideoDate}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 底部 -->
			<view style="height: 100rpx;"></view>
			<view class="history-bottom">
				<view v-if="show" @click="show = false" class="bottom">编辑</view>
				<view v-else class="bottom-qx">
					<van-checkbox :value="isCheckAll" @change="checkedAll">全选</van-checkbox>
					<view class="qx-rigth">
						<text class="rigth-a1" @click="cancel">取消</text>
						<text class="rigth-a2" :class="{ ation: isCheck }" @click="Delete">删除</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 空状态 -->
		<view class="empty" v-else>
			<image src="/static/nodata2.png" mode=""></image>
			<view>这里什么都没有</view>
		</view>
	</view>
</template>

<script setup>
	// vue3小程序生命周期函数
	import {
		onShareAppMessage,
		onLoad,
		onShow,
		onHide
	} from '@dcloudio/uni-app';
	import {
		storeToRefs
	} from "pinia"
	// import foo from "bar"
	import {
		ShopStore
	} from '../../store/shop'
	const shopStore = ShopStore()
	// 初始化
	const init = async () => {
		// 获取数据
		await shopStore.updateList()
	}
	// 是否勾选
	const lw = (id, e) => {
		const ace = e.detail
		const index = shopStore.shopList.findIndex(item => item[0].uid === id)
		shopStore.shopList[index][0].ace = ace
		shopStore.isCheck = ace
		console.log(shopStore.shopList)
		// 判断勾选删除
		if (ace) {
			shopStore.skuList.Videoid.push(shopStore.shopList[index][0].uid)
		} else {
			const index2 = shopStore.skuList.Videoid.findIndex(item => item === shopStore.shopList[index][0].uid)
			shopStore.skuList.Videoid.splice(index2, 1)
		}
	}
	// 是否全选
	const checkedAll = (e) => {
		const ace = e.detail
		shopStore.shopList.forEach(item => (item[0].ace = ace))
		shopStore.isCheck = ace
		// 判断全选删除
		shopStore.skuList.Videoid.forEach(res => {
			const id = res
			if (ace) {
				shopStore.shopList.forEach(item => {
					if (id === item[0].uid) return
					shopStore.skuList.Videoid.push(item[0].uid)
				})
			} else {
				shopStore.skuList.Videoid = []
			}
		})
	}
	// 取消编辑
	const cancel = () => {
		shopStore.show = true
		shopStore.shopList.forEach(item => (item[0].ace = false))
	}
	// 删除历史记录
	const Delete = async () => {
		await shopStore.DeleteGoods()
	}
	// 页面加载
	onLoad((message) => {})
	// 页面显示
	onShow(() => {
		init()
	})

	// 页面隐藏
	onHide(() => {

	})

	// 页面分享(不定义该函数 页面将无法分享)
	onShareAppMessage(() => {

	})
	const {
		shopList,
		show,
		isCheckAll,
		isCheck,
		skuList
	} = storeToRefs(shopStore)
</script>

<style lang="scss">
	.history {
		.empty {
			text-align: center;
			margin-top: 100rpx;
		}
		.ation {
			color: #000 !important;
		}

		// 头部
		.history-head {
			.head-title {
				border-bottom: 2rpx solid #E3E5E7;

				.title {
					display: flex;
					padding: 20rpx;
					height: 160rpx;

					van-checkbox {
						margin-top: 50rpx;
					}

					.title-image {
						width: 250rpx;
						height: 100%;

						image {
							width: 250rpx;
							height: 100%;
							border-radius: 10rpx;
						}
					}

					.title-box {
						margin-left: 20rpx;

						.box-top {
							height: 90rpx;

						}

						.box-bottom {
							font-size: 26rpx;
							color: #999;

							.top {
								height: 40rpx;
								overflow: hidden;
							}
						}
					}
				}
			}
		}

		// 底部
		.history-bottom {
			position: fixed;
			width: 100%;
			height: 110rpx;
			bottom: 0;
			background-color: #fff;
			border-top: 2rpx solid #E3E5E7;
			text-align: center;
			font-size: 34rpx;
			z-index: 9999;

			.bottom {
				line-height: 110rpx;
			}

			.bottom-qx {
				display: flex;
				padding: 40rpx 20rpx;
				font-size: 28rpx;

				.qx-rigth {
					position: relative;
					left: 380rpx;

					.rigth-a1 {
						margin-right: 100rpx;
					}

					.rigth-a2 {
						color: #999;
					}
				}
			}
		}
	}
</style>
